<template>

  <div>
            <div class="canser"></div>

<van-tabs v-model="active">
  <van-tab title="未使用（0）" class="tap-text">
    <div class="canserer" v-if="unusedtext.length == 0">
         <img src="../assets/ic_coupon.png" alt="" >
         <p>暂无未使用的优惠卷</p>
      </div>
                    <div class="past-all" v-for="(item,index) in unusedtext" :key="index" v-else>
                        <div class="past-top">
                                <div class="past-top-left">
                                    <div class="past-top-left-jia">
                                        <div>￥</div>
                                        <p>{{item.amount}}</p>
                                    </div>
                                    <p>{{item.couponDesc}}</p>
                                </div>

                                <div class="past-top-right">
                                    <div>{{item.couponName}}</div>
                                    <p>2018.07.27-2019.09.30</p>
                                </div>
                        </div>
                        <div class="past-button">
                            <div>详细信息</div>
                            <p @click="msgShow(index)"></p>
                        </div>
                        <div class="outon"  id="all" v-show="activeIndex===index">
                            {{item.couponDescription}}
                        </div>
                    </div>


  </van-tab>
  <van-tab :title="'已使用（'+this.bytesusedtext.length+'）'" class="tap-text">
          <div class="canserer" v-if="bytesusedtext.length == 0">
         <img src="../assets/ic_coupon.png" alt="" >
         <p>暂无未使用的优惠卷</p>
      </div>
     <div class="past-all" v-for="(item,index) in bytesusedtext" :key="index" v-else>
        <div class="past-top">
                <div class="past-top-left">
                     <div class="past-top-left-jia">
                         <div>￥</div>
                         <p>{{item.amount}}</p>
                     </div>
                     <p>{{item.couponDesc}}</p>
                </div>

                <div class="past-top-right">
                       <div>{{item.couponName}}</div>
                       <p>2018.07.27-2019.09.30</p>
                       <img src="../assets/ic_coupon_used_sign.png" alt="" class="past-top-right-img">
                </div>
        </div>
        <div class="past-button">
            <div>详细信息</div>
            <p @click="msgShow(index)"></p>
        </div>
        <div class="outon"  id="all" v-show="activeIndex===index">
              {{item.couponDescription}}
        </div>

     </div>

  </van-tab>

  <van-tab :title="'已过期' +'（'+ shuju.length+ '）'" class="tap-text">
                <div class="canserer" v-if="shuju.length == 0">
         <img src="../assets/ic_coupon.png" alt="" >
         <p>暂无未使用的优惠卷</p>
      </div>
     <div class="past-all" v-for="(item,index) in shuju" :key="index"   v-else>
        <div class="past-top">
                <div class="past-top-left">
                     <div class="past-top-left-jia">
                         <div>￥</div>
                         <p>{{item.amount}}</p>
                     </div>
                     <p>{{item.couponDesc}}</p>
                </div>

                <div class="past-top-right">
                       <div>{{item.couponName}}</div>
                       <p>2018.07.27-2019.09.30</p>
                </div>
        </div>
        <div class="past-button">
            <div>详细信息</div>
            <p @click="msgShow(index)"></p>
        </div>
        <div class="outon"  id="all" v-show="activeIndex===index">
              {{item.couponDescription}}
        </div>
     </div>
  </van-tab>
</van-tabs>

  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
      shuju:"",
      out:false,
      activeIndex: -1,
      bytesusedtext:"",
      unusedtext:[]
    }
},
  methods:{
          msgShow (index) {
              if(this.activeIndex == index){
                      this.activeIndex = !index;
              }else{
                  this.activeIndex = index
              }
     
    },
    //收起
    msgClose(index) {
      this.activeIndex = !index;
    },
    //未使用
         shujubao(){
             this.$http.post('https://web-gateway.newbeescm.com/b2b-app-web/myCouponList',{ 
                 couponStatusList:['3'],
                 merchantId:"14948",
                 pageNum:'1',
                 pageSize:'10'
             },
{             headers:{
              token: this.$store.state.token,
              userId: this.$store.state.userInfo.id
            }}
            ).then(res=>{console.log('优惠卷',res.data.result.list)
            this.shuju = res.data.result.list
            })
             },
            //已使用
             bytesused(){
                 this.$http.post('https://web-gateway.newbeescm.com/b2b-app-web/myCouponList',{
                 couponStatusList:['2'],
                 merchantId:"7462",
                 pageNum:'1',
                 pageSize:'10'
                 },{ headers:{
              token: this.$store.state.token,
              userId: this.$store.state.userInfo.id
            }}).then(res =>{
                console.log('已使用',res.data.result.list)
                this.bytesusedtext = res.data.result.list
            })
             },
             //未使用
               unused(){
                 this.$http.post('https://web-gateway.newbeescm.com/b2b-app-web/myCouponList',{
                 couponStatusList:['0'],
                 merchantId:"7462",
                 pageNum:'1',
                 pageSize:'10'
                 },{ headers:{
              token: this.$store.state.token,
              userId: this.$store.state.userInfo.id
            }}).then(res =>{
                console.log('未使用',res.data.result.list)
                this.unusedtext = res.data.result.list
            })
             }

         
  },
  mounted(){
         this.shujubao();
         this.bytesused();
         this.unused();

  }
}
</script>
<style scoped lang="scss">
.canserer{
    display: flex;
    flex-direction: column;
   // justify-content: center;
    position: fixed;
    width: 100%;
    height: 100%;
    align-items: center;
    img{
        margin-top: 1.5rem;
        width: 0.8rem;
        height: 0.8rem;
    }
    p{
        font-size: 0.12rem;
        color: #999999;
    }
}
.canser{
    position: fixed;
    width: 100%;
    height: 100%;
    background: #F2F1F6;
}
.past-all{
    .outon{
      //  display: block;
        font-size: 0.12rem;
      //  height: 0.3rem;
        width: 3.33rem;
        background: #F8F8F8;
        box-shadow: 0 1px 2px 0 rgba(0,0,0,0.10); 
        padding:0.1rem 0 0.1rem 0.14rem; 
    
    }
    margin-top:0.14rem;
    .past-button{
        p{
            margin-right: 0.1rem;
            background: #CCCCCC;
            width: 0.12rem;
            height: 0.12rem;
            border-radius: 50%;
        }
        div{
            margin-left: 0.09rem;
            color: #666666;
            font-size: 0.12rem;
        }
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 0.3rem;
        width: 3.47rem;
        background: #F8F8F8;
        box-shadow: 0 1px 2px 0 rgba(0,0,0,0.10);
    }
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .past-top{
        .past-top-right{
            position: relative;
            width: 2.27rem;
            height: 0.8rem;
            background: #FFFFFF;
            border-radius: 0 4px 0 0;
            .past-top-right-img{
                position: absolute;
                width: 0.5rem;
                height: 0.6rem;
                top: 0.1rem;
                right: 0;
            }
            div{
                margin: 0.1rem 0 0.29rem 0.13rem;
                font-size: 0.14rem;
                color: #333333;
            }
            p{
                position: absolute;
                bottom: 0.15rem;
                left: 0.14rem;
             //   margin: 0 0 0.15rem 0.14rem;
                font-size: 0.1rem;
                color: #999999;
            }

        }
        display: flex;
        .past-top-left{
            width: 1.2rem;
            height: 0.8rem;
            background: #999999;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,0.10);
            border-radius: 4px 4px 0 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            p{
                font-size: 0.12rem;
                color: #FFFFFF;
            }
            .past-top-left-jia{
                     color: #FFFFFF; 
                    display: flex;
                    align-items: center;
                    div{
                        font-size: 0.14rem;
                    }
                    p{
                        font-size: 0.28rem;
                    }
            }
        }
    }
}
</style>